<template>
    <section class="todoapp">
        <header class="header">
            <h1>todos</h1>
            <input
                class="new-todo"
                placeholder="What needs to be done?"
                autofocus
                @keydown.enter="addTodo"
            />
        </header>
        <section class="main">
            <input
                id="toggle-all"
                class="toggle-all"
                type="checkbox"
                :checked="undownNum === 0 && todoList.length !== 0"
                @click="toggleAll"
            />
            <label for="toggle-all">Mark all as complete</label>
            <ul class="todo-list">
                <li
                    v-for="item in todoList"
                    :key="item.id"
                    :class="{
                        completed: item.is_checked,
                        editing: item.is_editing,
                    }"
                >
                    <div class="view">
                        <input
                            class="toggle"
                            type="checkbox"
                            v-model="item.is_checked"
                        />
                        <!-- <label @dblclick="openInp(item.id)">
                            {{ item.text }}
                        </label> -->
                        <label @dblclick="allInp(item.id, 0)">
                            {{ item.text }}
                        </label>
                        <button
                            @click="delItem(item.id)"
                            class="destroy"
                        ></button>
                    </div>
                    <!-- <input
                        class="edit"
                        :value="item.text"
                        @keydown.enter="enterInp(item.id, $event)"
                        @keydown.esc="escInp(item.id)"
                    /> -->
                    <input
                        class="edit"
                        :value="item.text"
                        @keydown.enter="allInp(item.id, 1, $event)"
                        @keydown.esc="allInp(item.id, 2)"
                    />
                </li>
            </ul>
        </section>
        <footer class="footer">
            <span class="todo-count"
                ><strong>{{ undownNum }}</strong> item left</span
            >
            <ul class="filters">
                <li>
                    <a
                        :class="{ selected: isShow === 'all' }"
                        @click="isShow = 'all'"
                        name="all"
                        href="javascript:;"
                        >All</a
                    >
                </li>
                <li>
                    <a
                        :class="isShow === 'active' ? 'selected' : ''"
                        @click="isShow = 'active'"
                        name="active"
                        href="javascript:;"
                        >Active</a
                    >
                </li>
                <li>
                    <a
                        :class="{ selected: isShow === 'completed' }"
                        @click="isShow = 'completed'"
                        name="completed"
                        href="javascript:;"
                        >Completed</a
                    >
                </li>
            </ul>
            <button
                v-show="undownNum !== todoList.length"
                class="clear-completed"
                @click="clearCompleted"
            >
                Clear completed
            </button>
        </footer>
    </section>
    <footer class="info">
        <p>Double-click to edit a todo</p>
        <!-- Remove the below line ↓ -->
        <p>Template by <a href="javascript:;">Sindre Sorhus</a></p>
        <!-- Change this out with your name and url ↓ -->
        <p>Created by <a href="javascript:;">you</a></p>
        <p>Part of <a href="javascript:;">TodoMVC</a></p>
    </footer>

    <!-- 删除确认弹框 -->
    <showmsg v-if="delFlag" @cancelBtn="cancelBtn" @okBtn="okBtn" />
</template>

<script setup>
import showmsg from "./components/showmsg.vue";

import { ref, computed, watch } from "vue";

// 1. 创建响应式数据
const todoList = ref([]);
const baseList = ref([
    {
        id: 1,
        text: "吃饭",
        is_checked: true,
        is_editing: false,
    },
    {
        id: 2,
        text: "睡觉",
        is_checked: false,
        is_editing: false,
    },
    {
        id: 3,
        text: "打豆豆",
        is_checked: false,
        is_editing: false,
    },
]);
const isShow = ref("all");
const delFlag = ref(false);
const delId = ref(-1);

// 2. 组件需要使用的函数
// 10. 清空已选中
function clearCompleted() {
    delFlag.value = true;
}
// 9. 删除某一项
function delItem(id) {
    delFlag.value = true;
    delId.value = id;
}
// 8. 删除弹框的确定按钮
function okBtn() {
    baseList.value =
        delId.value === -1
            ? baseList.value.filter((t) => !t.is_checked)
            : baseList.value.filter((t) => t.id !== delId.value);

    // 确保 每一次删除完毕后, 不会因为 delId 影响下一次使用
    delId.value = -1;

    cancelBtn();
}
// 7. 删除弹框的取消按钮
function cancelBtn() {
    delFlag.value = false;
}
// 6. enter / esc / 双击事件
function allInp(id, type, e) {
    const info = baseList.value.find((t) => t.id === id);
    type === 1 && (info.text = e.target.value);

    info.is_editing = !type;
}
// 2. 点击全选按钮
function toggleAll(e) {
    // console.log(e.target.checked)
    baseList.value.forEach((t) => (t.is_checked = e.target.checked));
}
// 1. 添加新的 todo
function addTodo(e) {
    // console.log("键盘按下", e.target.value);
    baseList.value.push({
        id: baseList.value[baseList.value.length - 1].id + 1,
        text: e.target.value,
        is_checked: false,
        is_editing: false,
    });

    e.target.value = "";
}

// 3. 计算属性
const undownNum = computed(
    () => baseList.value.filter((t) => !t.is_checked).length
);

// 4. 侦听器
watch(
    [baseList, isShow],
    () => {
        if (isShow.value === "all") {
            todoList.value = baseList.value;
        }
        if (isShow.value === "active") {
            todoList.value = baseList.value.filter((t) => !t.is_checked);
        }
        if (isShow.value === "completed") {
            todoList.value = baseList.value.filter((t) => t.is_checked);
        }
    },
    {
        immediate: true,
        deep: true,
    }
);
</script>

<style></style>
